<template>
    <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="6em"
    >
        <el-row type="flex" :gutter="10">
            <el-col :span="24">
                <el-form-item label="用户头像" prop="avatar">
                    <el-upload-image
                        v-model="formData.avatar"
                    ></el-upload-image>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="权限组" prop="rule_arr">
                    <el-cascader
                        v-model="formData.rule_arr"
                        :options="roleData"
                        :props="props"
                        clearable
                    ></el-cascader>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="用户名" prop="username">
                    <el-input
                        v-model="formData.username"
                        placeholder="请输入3-15位的字母或数字的组合"
                        maxlength="15"
                        type="text"
                        clearable
                    ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="密码" prop="password">
                    <el-input
                        v-model="formData.password"
                        placeholder="编辑时非必填"
                        maxlength="32"
                        type="password"
                        show-password
                        clearable
                    ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="昵称" prop="nickname">
                    <el-input
                        v-model="formData.nickname"
                        placeholder="示例: 管理员"
                        type="text"
                        clearable
                    ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="邮箱" prop="email">
                    <el-input
                        v-model="formData.email"
                        placeholder="示例: 12346@email.com"
                        type="text"
                        clearable
                    ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="手机号" prop="mobile">
                    <el-input
                        v-model="formData.mobile"
                        placeholder="示例: 13888888888"
                        maxlength="11"
                        type="text"
                        clearable
                    ></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="启用状态" prop="status">
                    <el-switch
                        v-model="formData.status"
                        active-value="1"
                        inactive-value="0"
                    ></el-switch>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row type="flex" justify="center">
            <el-button type="primary" icon="el-icon-check" @click="onConfirm"
                >完成({{ current + 1 }}/{{ selection.length }})</el-button
            >
            <el-button type="default" icon="el-icon-close" @click="onCancel"
                >取消</el-button
            >
        </el-row>
    </el-form>
</template>

<script>
import { post } from "@/assets/js/http.js";

export default {
    name: "admin-edit",
    props: {
        selection: {
            type: Array,
            default: () => []
        },
        roleData: {
            type: Array,
            default: () => []
        },
		department: {
		    type: Array,
		    default: () => []
		}
    },
    components: {
        "el-upload-image": () => import("@/components/el-upload-image.vue")
    },
    watch: {
        selection() {
            this.setFormData();
        }
    },
    mounted() {
        this.setFormData();
    },
    data() {
        return {
            current: 0,
            props: {
                label: "name",
                value: "id",
                children: "children",
                multiple: true,
                checkStrictly: true
            },
            formData: {
                avatar: [],
                username: "",
                password: "",
                nickname: "",
                rule_arr: [],
                email: "",
                mobile: "",
                status: "1"
            },
            formRules: {
                username: [
                    {
                        required: true,
                        message: "此项为必填项"
                    },
                    {
                        pattern: /^[A-Za-z0-9]{3,15}$/,
                        message: "格式错误"
                    }
                ],
                password: [
                    {
                        pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[a-zA-Z0-9]{6,32}$/,
                        message: "格式错误"
                    }
                ],
                nickname: {
                    required: true,
                    message: "此项为必填项"
                },
                rule_arr: {
                    required: true,
                    message: "此项为必填项"
                },
                email: {
                    pattern: /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,
                    message: "邮箱格式错误",
                    trigger: "blur"
                },
                mobile: [
								    {
								        required: true,
								        message: "此项为必填项"
								    },
								    {
								        pattern:/^1([38][0-9]|4[014-9]|[59][0-35-9]|6[2567]|7[0-8])\d{8}$/,
								        message: "手机号码格式错误"
								    }
								],
            },
			
        };
    },
    methods: {
        setFormData() {
            if (this.selection.length > 0) {
                const data = this.selection[this.current];
                this.formData.id = data.id;
                this.formData.username = data.username;
                this.formData.nickname = data.nickname;
                this.formData.rule_arr = JSON.parse(data.rule_arr);
				// let newRule_arr =JSON.parse(data.rule_arr)
				// console.log(JSON.parse(data.rule_arr),newRule_arr)
				// let a = []
				// newRule_arr.forEach((item, index) => {
				//     a.push(item * 1)
				// })
				// this.formData.rule_arr = [...a]
				// console.log(a,newRule_arr,this.formData.rule_arr)
				// this.formData.department = data.department
				// this.formData.pid = data.pid
                this.formData.email = data.email;
                this.formData.mobile = data.mobile;
                this.formData.status = data.status;
                this.formData.avatar = [{ url: data.avatar }];
            }
        },
        onConfirm() {
			 
            this.$refs.formRef.validate(async isValid => {
                if (isValid) {
                    const formData = JSON.parse(JSON.stringify(this.formData));
                    formData.group_arr = formData.rule_arr.map(item => {
                        return item[item.length - 1];
                    });
					 // formData.group_arr = [formData.rule_arr[formData.rule_arr.length - 1]]
                   if (formData.avatar.length > 0) {
                       if (formData.avatar[0].response) {
                           formData.avatar = "https://wjdc.zxkjnc.com/" + formData.avatar[0].response.data.file.url;
                       } else {
                           formData.avatar = formData.avatar[0].url;
                       }
                   } else {
                       formData.avatar = "";
                   }
                    await post({
                        url: "/admin/auth.admin/edit",
                        data: formData,
                        loading: true,
                        successTip: true
                    });
                    if (this.current === this.selection.length - 1) {
                        this.$emit("update");
                        this.$parent.$emit("update:visible", false);
                        this.$refs.formRef.resetFields();
                    } else {
                        this.current += 1;
                        this.setFormData();
                    }
                }
            });
        },
        onCancel() {
            if (this.current > 0) {
                this.$emit("update");
            }
            this.$parent.$emit("update:visible", false);
            this.$refs.formRef.resetFields();
        }
    }
};
</script>
